<template>
  <view class="flexible_orders_box">
    <view @click="emit('onClick')">
      <!-- 订单内容： -->
      <binary-layout :middle-text="props.title">
        <template #left>
          <view class="item">订单内容:</view>
        </template>
        <!-- 订单状态： -->
        <template #right>
          <view class="item state">{{ getEnumValue(props.state) }}</view>
        </template>
      </binary-layout>

      <!-- 提交时间： -->
      <binary-layout
        :left-text="`提交时间:`"
        :middle-text="props.createTimes"
      />

      <!-- 订单类型 -->
      <binary-layout :left-text="`订单类型:`" :middle-text="props.category" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getEnumValue } from '@/config/enum/enum'
import binaryLayout from '@/components/layout/binary_layout/binary-layout.vue'

//接受父组件参数
const props = defineProps({
  /**
   * 标题
   */
  title: {
    type: String,
    default: '',
  },
  /**
   * 类型
   */
  category: {
    type: String,
    default: '',
  },
  /**
   * 提交时间
   */
  createTimes: {
    type: String,
    default: '',
  },
  /**
   * 订单状态
   */
  state: {
    type: Number,
    default: 0,
  },
})

//自定义事件
const emit = defineEmits<{
  (e: 'onClick'): void
}>()
</script>

<style scoped lang="scss">
.flexible_orders_box {
  padding: 10rpx 20rpx 10rpx;
  background-color: $uni-bg-color;
  margin-bottom: 30rpx;
  border-radius: 10rpx;

  .msg {
    text-align: right;
    color: rgb(246, 177, 16);
    font-size: 30rpx;
    border-top: 2rpx solid rgba(184, 180, 180, 0.213);

    .list {
      display: flex;
      .bth {
        font-size: 28rpx;
        padding: 10rpx 14rpx;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10rpx;
        background-color: rgb(246, 166, 16);
        color: rgb(255, 255, 255);
      }
    }
  }

  .item {
    width: 140rpx;
  }

  .state {
    color: rgb(246, 177, 16);
    width: 110rpx;
    text-align: right;
  }
}
</style>
